<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线考试系统 - 管理员主页</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/all.min.css">
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --admin-accent: #7209b7;
            --student-accent: #4361ee;
            --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }

        body {
            font-family: '微软雅黑', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fb;
            color: #333;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 导航栏样式 */
        .navbar {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 0.8rem 1rem;
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
        }

        .navbar-brand i {
            margin-right: 10px;
            font-size: 1.8rem;
        }

        .nav-link {
            color: rgba(255, 255, 255, 0.85) !important;
            font-weight: 500;
            padding: 0.5rem 1rem !important;
            border-radius: 4px;
            margin: 0 3px;
            transition: var(--transition);
        }

        .nav-link:hover, .nav-link.active {
            background-color: rgba(255, 255, 255, 0.15);
            color: white !important;
        }

        /* 主内容区域 */
        .main-content {
            flex: 1;
            padding: 2rem 0;
        }

        .welcome-section {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            box-shadow: var(--card-shadow);
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }

        .welcome-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 5px;
            height: 100%;
            background-color: var(--admin-accent);
        }

        .welcome-title {
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .welcome-text {
            color: #6c757d;
            margin-bottom: 0;
        }

        /* 功能卡片 */
        .card {
            border: none;
            border-radius: 16px;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            height: 100%;
            overflow: hidden;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }

        .card-header {
            background: white;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            padding: 1.25rem 1.5rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            border-radius: 16px 16px 0 0;
        }

        .card-header i {
            margin-right: 10px;
            font-size: 1.25rem;
            color: var(--admin-accent);
        }

        .card-body {
            padding: 1.5rem;
        }

        .card-title {
            font-weight: 700;
            margin-bottom: 0.75rem;
        }

        .card-text {
            color: #6c757d;
            margin-bottom: 1.5rem;
        }

        .btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-secondary {
            border-radius: 8px !important;
            font-weight: 600;
        }

        .btn-group .btn {
            margin-right: 4px;
        }

        .table {
            border-radius: 12px;
            overflow: hidden;
        }

        .table thead {
            background: linear-gradient(90deg, #7209b7 0%, #4361ee 100%);
            color: #fff;
        }

        .table-striped>tbody>tr:nth-of-type(odd) {
            background-color: #f3f0fa;
        }

        .table-hover>tbody>tr:hover {
            background-color: #e0e7ff;
        }

        .modal-content {
            border-radius: 16px;
        }

        .dashboard-card {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 2px 12px rgba(67,97,238,0.08);
            padding: 1.5rem 1rem;
            text-align: center;
            transition: box-shadow 0.3s;
            min-height: 180px;
        }

        .dashboard-card:hover {
            box-shadow: 0 6px 24px rgba(67,97,238,0.16);
        }

        .dashboard-chart {
            height: 80px;
        }

        .dashboard-big-chart {
            height: 260px;
        }

        .dashboard-label {
            margin-top: 1rem;
            font-weight: 600;
            color: #4361ee;
            font-size: 1.1rem;
        }

        /* 页脚样式 */
        .footer {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 2rem 0;
            margin-top: auto;
        }

        .admin .footer {
            background: linear-gradient(135deg, var(--admin-accent), #560bad);
        }

        .student .footer {
            background: linear-gradient(135deg, var(--student-accent), #3a0ca3);
        }

        .footer-title {
            font-weight: 700;
            margin-bottom: 1rem;
            font-size: 1.25rem;
        }

        .footer-links {
            list-style: none;
            padding: 0;
        }

        .footer-links li {
            margin-bottom: 0.5rem;
        }

        .footer-links a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            transition: var(--transition);
        }

        .footer-links a:hover {
            color: white;
            text-decoration: underline;
        }

        .social-icons {
            display: flex;
            gap: 15px;
            margin-top: 1rem;
        }

        .social-icons a {
            color: white;
            font-size: 1.5rem;
            transition: var(--transition);
        }

        .social-icons a:hover {
            transform: translateY(-3px);
        }

        .copyright {
            text-align: center;
            padding-top: 1.5rem;
            margin-top: 1.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .navbar-brand {
                font-size: 1.2rem;
            }

            .welcome-section {
                padding: 1rem;
            }

            .dashboard-card, .card {
                padding: 1rem 0.5rem;
            }

            .dashboard-big-chart {
                height: 180px;
            }
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container">
        <a class="navbar-brand" href="/home/manage">
            <i class="fas fa-graduation-cap"></i>在线考试系统
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="/home/manage"><i class="fas fa-home"></i> 主页</a>
                </li>
            </ul>

            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/admin/profile">
                        <i class="fas fa-user-circle"></i> 个人信息
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/logout">
                        <i class="fas fa-sign-out-alt"></i> 退出登录
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 主内容区域 -->
<div class="main-content">
    <div class="container-fluid">
        <!-- 数据可视化区域（无"系统数据大屏"标题） -->
        <div class="row g-4 mb-4">
            <div class="col-md-3 col-6">
                <div class="dashboard-card">
                    <div id="userCountChart" class="dashboard-chart"></div>
                    <div class="dashboard-label">用户总数</div>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="dashboard-card">
                    <div id="studentCountChart" class="dashboard-chart"></div>
                    <div class="dashboard-label">学生人数</div>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="dashboard-card">
                    <div id="teacherCountChart" class="dashboard-chart"></div>
                    <div class="dashboard-label">教师人数</div>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="dashboard-card">
                    <div id="classCountChart" class="dashboard-chart"></div>
                    <div class="dashboard-label">班级数量</div>
                </div>
            </div>
        </div>
        <div class="row g-4 mb-4">
            <div class="col-md-6">
                <div class="dashboard-card">
                    <div id="userRolePie" class="dashboard-big-chart"></div>
                    <div class="dashboard-label">用户角色分布</div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="dashboard-card">
                    <div id="userTrendLine" class="dashboard-big-chart"></div>
                    <div class="dashboard-label">用户增长趋势</div>
                </div>
            </div>
        </div>
        <!-- 用户管理区域 -->
        <div class="card mt-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="fas fa-users-cog"></i> 用户管理</span>
                <button class="btn btn-success btn-sm" data-bs-toggle="collapse" data-bs-target="#addUserPanel">
                    <i class="fas fa-user-plus"></i> 添加用户
                </button>
            </div>
            <div class="card-body">
                <!-- 搜索表单 -->
                <form class="row mb-3" th:action="@{/admin/users/search}" method="get">
                    <div class="col-md-3">
                        <input type="text" class="form-control" name="keyword" placeholder="用户名/邮箱/真实姓名">
                    </div>
                    <div class="col-md-3">
                        <select class="form-select" name="role">
                            <option value="">全部角色</option>
                            <option value="student">学生</option>
                            <option value="teacher">教师</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i> 搜索</button>
                    </div>
                </form>
                <!-- 添加用户表单（折叠） -->
                <div class="collapse mb-4" id="addUserPanel">
                    <form class="row g-3" th:action="@{/admin/users/add}" method="post">
                        <div class="col-md-2">
                            <input type="text" class="form-control" name="userId" placeholder="用户ID" required autocomplete="off">
                        </div>
                        <div class="col-md-2">
                            <input type="text" class="form-control" name="userName" placeholder="用户名" required autocomplete="off">
                        </div>
                        <div class="col-md-2">
                            <input type="password" class="form-control" name="password" placeholder="密码" required autocomplete="new-password">
                        </div>
                        <div class="col-md-2">
                            <select class="form-select" name="role" required>
                                <option value="student">学生</option>
                                <option value="teacher">教师</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <input type="email" class="form-control" name="email" placeholder="邮箱" required>
                        </div>
                        <div class="col-md-2">
                            <input type="text" class="form-control" name="phone" placeholder="手机号">
                        </div>
                        <div class="col-md-2">
                            <input type="text" class="form-control" name="realName" placeholder="真实姓名">
                        </div>
                        <div class="col-md-2">
                            <select class="form-select" name="classId">
                                <option value="">请选择班级（仅学生）</option>
                                <option th:each="clazz : ${classes}" th:value="${clazz.classId}" th:text="${clazz.className}"></option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button type="submit" class="btn btn-success"><i class="fas fa-plus"></i> 添加用户</button>
                        </div>
                    </form>
                </div>
                <!-- 用户列表表格 -->
                <table class="table table-striped table-hover align-middle">
                    <thead>
                    <tr>
                        <th>用户ID</th>
                        <th>用户名</th>
                        <th>角色</th>
                        <th>邮箱</th>
                        <th>手机号</th>
                        <th>真实姓名</th>
                        <th>班级</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="user : ${users}">
                        <td th:text="${user.userId}"></td>
                        <td th:text="${user.userName}"></td>
                        <td th:text="${user.role}"></td>
                        <td th:text="${user.email}"></td>
                        <td th:text="${user.phone}"></td>
                        <td th:text="${user.realName}"></td>
                        <td th:text="${user.className} ?: '-'" ></td>
                        <td>
                            <div class="btn-group btn-group-sm" role="group">
                                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editModal"
                                        th:data-userid="${user.userId}"
                                        th:data-username="${user.userName}"
                                        th:data-role="${user.role}"
                                        th:data-email="${user.email}"
                                        th:data-phone="${user.phone}"
                                        th:data-realname="${user.realName}"
                                        th:data-classid="${user.classId}">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <a th:href="@{'/admin/users/delete/' + ${user.userId}}" class="btn btn-danger" onclick="return confirm('确定删除该用户吗？')">
                                    <i class="fas fa-trash-alt"></i>
                                </a>
                                <button class="btn btn-warning ms-1"
                                        th:if="${user.role}=='teacher'"
                                        th:attr="data-userid=${user.userId},data-username=${user.userName},data-realname=${user.realName}"
                                        onclick="openAssignModal(this)"><i class="fas fa-chalkboard-teacher"></i></button>
                                <button class="btn btn-info ms-1"
                                        th:if="${user.role}=='student'"
                                        th:attr="data-userid=${user.userId},data-username=${user.userName},data-realname=${user.realName}"
                                        onclick="openStudentAssignModal(this)"><i class="fas fa-book"></i></button>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 编辑用户模态框 -->
        <div class="modal fade" id="editModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">编辑用户</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <form th:action="@{/admin/users/update}" method="post">
                        <input type="hidden" name="userId" id="editUserId">
                        <div class="modal-body">
                            <div class="mb-3">
                                <label class="form-label">用户名</label>
                                <input type="text" class="form-control" name="userName" id="editUserName" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">角色</label>
                                <select class="form-select" name="role" id="editRole" required>
                                    <option value="student">学生</option>
                                    <option value="teacher">教师</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">邮箱</label>
                                <input type="email" class="form-control" name="email" id="editEmail" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">手机号</label>
                                <input type="text" class="form-control" name="phone" id="editPhone">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">真实姓名</label>
                                <input type="text" class="form-control" name="realName" id="editRealName">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">班级（仅学生）</label>
                                <select class="form-select" name="classId" id="editClassId">
                                    <option value="">请选择班级</option>
                                    <option th:each="clazz : ${classes}" th:value="${clazz.classId}" th:text="${clazz.className}"></option>
                                </select>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary">保存更改</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- 分配课程/班级弹窗 -->
        <div class="modal fade" id="assignModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header"><h5 class="modal-title">分配课程/班级</h5></div>
                    <div class="modal-body">
                        <div><b>教师：</b><span id="assignTeacherName"></span></div>
                        <hr/>
                        <div class="row">
                            <div class="col-md-6">
                                <h6>课程分配</h6>
                                <div id="assignCourseCheckboxes"></div>
                            </div>
                            <div class="col-md-6">
                                <h6>班级分配</h6>
                                <div id="assignClassCheckboxes"></div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" id="saveAssignBtn">保存</button>
                        <button class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 分配学生课程弹窗 -->
        <div class="modal fade" id="studentAssignModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header"><h5 class="modal-title">分配学生课程</h5></div>
                    <div class="modal-body">
                        <div><b>学生：</b><span id="assignStudentName"></span></div>
                        <hr/>
                        <div id="assignStudentCourseCheckboxes"></div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" id="saveStudentAssignBtn">保存</button>
                        <button class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer class="footer">
    <div class="container text-center py-4">
        <a href="https://gitee.com/sorrymaker04/onlineexam-workload" target="_blank"><i class="fab fa-github fa-2x"></i></a>
        <div class="copyright mt-2">
            &copy; 2025 版权所有 北城在线考试系统小组 12 Team
        </div>
    </div>
</footer>
<!-- Bootstrap JS -->
<script src="/js/bootstrap.bundle.min.js"></script>

<!-- ECharts CDN -->
<script src="/js/echarts.min.js"></script>
<script>
// 数字动画卡片渲染
function renderNumberCard(domId, value, iconClass, color) {
    var chart = echarts.init(document.getElementById(domId));
    chart.clear();
    chart.setOption({
        graphic: [
            {
                type: 'text',
                left: 'center',
                top: 'center',
                style: {
                    text: value + '',
                    font: 'bold 44px 微软雅黑, Arial',
                    fill: color,
                    textAlign: 'center',
                    textVerticalAlign: 'middle',
                    shadowColor: '#eee',
                    shadowBlur: 2
                }
            },
            {
                type: 'group',
                left: 18,
                top: 18,
                children: [
                    {
                        type: 'text',
                        style: {
                            text: iconClass,
                            font: '28px FontAwesome',
                            fill: color
                        }
                    }
                ]
            }
        ]
    });
}
function renderAdminDashboard(data) {
    renderNumberCard('userCountChart', data.userCount || 0, '\uf007', '#7209b7'); // fa-user
    renderNumberCard('studentCountChart', data.studentCount || 0, '\uf501', '#4361ee'); // fa-user-graduate
    renderNumberCard('teacherCountChart', data.teacherCount || 0, '\uf19d', '#3f37c9'); // fa-chalkboard-teacher
    renderNumberCard('classCountChart', data.classCount || 0, '\uf0c0', '#00b894'); // fa-users
    // 角色分布饼图
    var userRolePie = echarts.init(document.getElementById('userRolePie'));
    userRolePie.setOption({
        title: {text: '用户角色分布', left: 'center'},
        tooltip: {trigger: 'item'},
        legend: {bottom: 0},
        series: [{
            name: '角色', type: 'pie', radius: '60%',
            data: [
                {value: data.studentCount||0, name: '学生'},
                {value: data.teacherCount||0, name: '教师'},
                {value: data.adminCount||0, name: '管理员'}
            ]
        }]
    });
    // 用户增长趋势
    var userTrendLine = echarts.init(document.getElementById('userTrendLine'));
    userTrendLine.setOption({
        title: {text: '用户增长趋势', left: 'center'},
        tooltip: {trigger: 'axis'},
        xAxis: {type: 'category', data: data.trendDates||[]},
        yAxis: {type: 'value'},
        series: [{data: data.trendCounts||[], type: 'line', smooth: true}]
    });
}
window.addEventListener('DOMContentLoaded', function() {
    fetch('/admin/users/dashboard/data').then(r=>r.json()).then(data=>{
        renderAdminDashboard(data);
    });
});
// 编辑用户模态框数据填充
var editModal = document.getElementById('editModal');
if(editModal){
    editModal.addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget;
        document.getElementById('editUserId').value = button.getAttribute('data-userid');
        document.getElementById('editUserName').value = button.getAttribute('data-username');
        document.getElementById('editRole').value = button.getAttribute('data-role');
        document.getElementById('editEmail').value = button.getAttribute('data-email');
        document.getElementById('editPhone').value = button.getAttribute('data-phone')||'';
        document.getElementById('editRealName').value = button.getAttribute('data-realname')||'';
        // 设置班级下拉框选中项
        const classId = button.getAttribute('data-classid')||'';
        const classSelect = document.getElementById('editClassId');
        if(classSelect){
            for(let i=0;i<classSelect.options.length;i++){
                if(classSelect.options[i].value==classId){
                    classSelect.selectedIndex=i;break;
                }
            }
        }
    });
}
// 分配课程/班级弹窗逻辑
let currentAssignTeacherId = null;
function openAssignModal(btn) {
    const teacherId = btn.getAttribute('data-userid');
    const teacherName = btn.getAttribute('data-realname') || btn.getAttribute('data-username');
    currentAssignTeacherId = teacherId;
    document.getElementById('assignTeacherName').textContent = teacherName;
    // 加载所有课程和已分配课程
    fetch('/admin/users/all-courses').then(r=>r.json()).then(allCourses=>{
        fetch(`/admin/users/teacher/${teacherId}/courses`).then(r=>r.json()).then(assigned=>{
            let html = '';
            allCourses.forEach(c=>{
                let checked = assigned.map(String).includes(String(c.courseId)) ? ' checked' : '';
                html += `<div class='form-check'><input class='form-check-input' type='checkbox' name='assignCourse' value='${c.courseId}' id='course_${c.courseId}'${checked}><label class='form-check-label' for='course_${c.courseId}'>${c.courseName}</label></div>`;
            });
            document.getElementById('assignCourseCheckboxes').innerHTML = html;
        });
    });
    // 加载所有班级和已分配班级
    fetch('/admin/users/all-classes').then(r=>r.json()).then(allClasses=>{
        fetch(`/admin/users/teacher/${teacherId}/classes`).then(r=>r.json()).then(assigned=>{
            let html = '';
            allClasses.forEach(c=>{
                let checked = assigned.map(String).includes(String(c.classId)) ? ' checked' : '';
                html += `<div class='form-check'><input class='form-check-input' type='checkbox' name='assignClass' value='${c.classId}' id='class_${c.classId}'${checked}><label class='form-check-label' for='class_${c.classId}'>${c.className}</label></div>`;
            });
            document.getElementById('assignClassCheckboxes').innerHTML = html;
        });
    });
    var modal = new bootstrap.Modal(document.getElementById('assignModal'));
    modal.show();
}
document.getElementById('saveAssignBtn').onclick = function(){
    // 收集选中的课程和班级
    let courseIds = Array.from(document.querySelectorAll("input[name='assignCourse']:checked")).map(i=>i.value);
    let classIds = Array.from(document.querySelectorAll("input[name='assignClass']:checked")).map(i=>i.value);
    // 保存课程
    fetch(`/admin/users/teacher/${currentAssignTeacherId}/assign-courses`, {
        method:'POST', headers:{'Content-Type':'application/json'},
        body:JSON.stringify(courseIds)
    }).then(r=>r.text()).then(()=>{
        // 保存班级
        fetch(`/admin/users/teacher/${currentAssignTeacherId}/assign-classes`, {
            method:'POST', headers:{'Content-Type':'application/json'},
            body:JSON.stringify(classIds)
        }).then(r=>r.text()).then(()=>{
            alert('分配成功！');
            var modal = bootstrap.Modal.getInstance(document.getElementById('assignModal'));
            modal.hide();
        });
    });
};
function openStudentAssignModal(btn) {
    const studentId = btn.getAttribute('data-userid');
    const studentName = btn.getAttribute('data-realname') || btn.getAttribute('data-username');
    window.currentAssignStudentId = studentId;
    document.getElementById('assignStudentName').textContent = studentName;
    // 加载所有课程和已分配课程
    fetch('/admin/users/all-courses').then(r=>r.json()).then(allCourses=>{
        fetch(`/admin/users/student/${studentId}/courses`).then(r=>r.json()).then(assigned=>{
            let html = '';
            allCourses.forEach(c=>{
                let checked = assigned.map(String).includes(String(c.courseId)) ? ' checked' : '';
                html += `<div class='form-check'><input class='form-check-input' type='checkbox' name='assignStudentCourse' value='${c.courseId}' id='student_course_${c.courseId}'${checked}><label class='form-check-label' for='student_course_${c.courseId}'>${c.courseName}</label></div>`;
            });
            document.getElementById('assignStudentCourseCheckboxes').innerHTML = html;
        });
    });
    var modal = new bootstrap.Modal(document.getElementById('studentAssignModal'));
    modal.show();
}
document.getElementById('saveStudentAssignBtn').onclick = function(){
    let courseIds = Array.from(document.querySelectorAll("input[name='assignStudentCourse']:checked")).map(i=>i.value);
    fetch(`/admin/users/student/${window.currentAssignStudentId}/assign-courses`, {
        method:'POST', headers:{'Content-Type':'application/json'},
        body:JSON.stringify(courseIds)
    }).then(r=>r.text()).then(()=>{
        alert('分配成功！');
        var modal = bootstrap.Modal.getInstance(document.getElementById('studentAssignModal'));
        modal.hide();
    });
};
</script>
</body>
</html>